<template>
  <div>
    <!-- 店员管理 -->

    <!-- 面包屑导航 -->
    <Crumbs></Crumbs>
    <div class="clerkBox_one">
      <button class="roleBtn" @click="clerk">添加店员</button>
      <el-form ref="form" label-width="80px">
        <el-select v-model="region" placeholder="状态" style="width: 100px" @change="screen">
          <el-option label="状态" value="状态"></el-option>
          <el-option label="启用" value="启用"></el-option>
          <el-option label="禁用" value="禁用"></el-option>
        </el-select>
        <el-input placeholder="店员姓名/用户名/手机号/店员名称" v-model="input3" class="input-with-select" style="width: 400px">
          <el-button slot="append" @click="search">筛选</el-button>
        </el-input>
      </el-form>
    </div>

    <div class="store_list">
      <el-table :data="arr" border style="width: 100%">
        <el-table-column fixed prop="clerk" label="店员"> </el-table-column>
        <el-table-column fixed prop="rolename" label="姓名"> </el-table-column>
        <el-table-column prop="store" label="所属门店"> </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template style="display: flex; justify-content: space-around" slot-scope="scope">
            <el-button type="text" size="small" @click="modifyBtn(scope.row)">修改信息</el-button>
            <el-button type="text" size="small" @click="deleteBtn(scope.row)">删除店员</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// import { getXclerkAdmin} from '../../api';
import Crumbs from './Crumbs.vue'
import lodash from 'lodash'
export default {
  components: { Crumbs },
  data() {
    return {
      region: '',
      input3: '',
      select: '',
      tableData: [],
      arr: [],
    }
  },
  methods: {
    clerk() {
      this.$router.push('/addClerk')
    },
    //修改
    modifyBtn(row) {
      this.$router.push({
        path: '/clerkModify',
        name: 'clerkModify',
        params: {
          list: row,
        },
      })
    },
    // 状态筛选
    screen() {
      // console.log(this.region);
      let that = this
      if (this.region != '状态') {
        let y = this.tableData.filter(function (obj) {
          return obj.state == that.region
        })
        this.arr = y
      } else {
        this.arr = this.tableData
      }
    },
    //input筛选
    search() {
      let that = this
      var n = lodash.findIndex(this.tableData, function (o) {
        //判断用户名是否存在
        if (o.rolename == that.input3) {
          return o.rolename == that.input3
        } else if (o.clerk == that.input3) {
          return o.clerk == that.input3
        } else if (o.store == that.input3) {
          return o.store == that.input3
        }
      })
      //  console.log(n);
      this.arr = [this.tableData[n]]
    },
  },
  // created(){
  //   getXclerkAdmin().then(res=>{
  //     // console.log(res);
  //     this.tableData=res.data
  //     this.arr=res.data
  //   })

  // }
}
</script>

<style lang="scss" scoped>
.clerkBox_one {
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .roleBtn {
    width: 100px;
    height: 35px;
    border: none;
    // margin: 20px 0px 40px 30px;
    border-radius: 10px;
  }
}

.store_list {
  width: 900px;
  margin: 80px auto;

  .el-table th.el-table__cell {
    background: lightgray;
  }
}
</style>
